<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" />
  </head>
  <body ng-app="myApp">
    <div class="container" ng-controller="AppController">
      <div class="page-header">
        <h1>A checklist</h1>
      </div>
       
      <div class="alert alert-info" role="alert" ng-hide="trades && trades.length > 0">
        There are no items yet.
      </div>
      <form class="form-horizontal" role="form" ng-submit="addTrade(newTrade)">
        <div class="form-group" ng-repeat="trade in trades">
          <div class="checkbox col-xs-9">
            <label>
              {{trade.clientname}} {{trade.buysell}} {{trade.stock}} {{trade.volume}} {{trade.price}}
            </label>
          </div>
          <div class="col-xs-3">
            <button class="pull-right btn btn-danger" type="button" title="Delete"
              ng-click="deleteTrade(trades)">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </div>
        </div>
        <hr />
        <div class="input-group">
          
          <input type="text" class="form-control" ng-model="newTrade.clientname" placeholder="Enter clientname" />
          <input type="text" class="form-control" ng-model="newTrade.buysell" placeholder="Enter buysell" />
          <input type="text" class="form-control" ng-model="newTrade.stock" placeholder="Enter stock" />
          <input type="number" class="form-control" ng-model="newTrade.volume" placeholder="Enter volume" />
          <input type="number" class="form-control" ng-model="newTrade.price" placeholder="Enter price" />
          
          <span class="input-group-btn">
            <button class="btn btn-default" type="submit" ng-disabled="!newTrade" title="Add">
              <span class="glyphicon glyphicon-plus"></span>
            </button>
          </span>
        </div>        
      </form>
    </div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular-resource.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
    <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.eot"></script>
    <script src="http://ui-grid.info/release/ui-grid.svg"></script>
    <script src="http://ui-grid.info/release/ui-grid.ttf"></script>
    <script src="http://ui-grid.info/release/ui-grid.woff"></script>    
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/controllers.js"></script>
    <script type="text/javascript" src="js/services.js"></script>
  </body>
</html>